<template>
  <view class="pingjia_page">
    <view class="page_top">
      <u-tabs
        :list="list4"
        lineWidth="30"
        lineHeight="7"
        :lineColor="`url(${lineBg}) 100% 100%`"
        :activeStyle="{ color: '#303133', fontWeight: 'bold' }"
        :inactiveStyle="{ color: '#606266' }"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
      >
      </u-tabs>
    </view>
    <view class="page_bottom">
      <scroll-view
        scroll-y="true"
        class="uni_swiper_tab item"
      >
        <view
          class="_card"
          v-for="(i, index) in scenicNotUseList"
          :key="index"
        >
          <item-info
            :itemInfo="i"
            @cancel-order="cancelOrder"
            @pay-order="payOrder"
          />
        </view>
        <u-loadmore status="nomore" />
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { orderPageApi } from "@/api/mine";
import {
  cancelOrderApi,
  getOrderDetailsByIdApi, // // 4 根据订单ID查询订单详情(支付界面使用)
} from "@/api/jingqu/piao";


import ItemInfo from "./comp/ItemInfo.vue";

export default {
  components: {
    ItemInfo,
  },
  data() {
    return {
      lineBg:
        "",
      status: 4,
      list4: [
        {
          name: "全部",
        },
        {
          name: "景区",
        },
        {
          name: "酒店",
        },
      ],
      allUseList: [], // 全部
      hotelNotUseList: [], // 酒店
      scenicNotUseList: [], // 景区
    };
  },

  onLaunch() { },

  onLoad() { },
  onShow() {
    this.getOrderPageApi();
  },
  methods: {
    // 去支付
    payOrder(orderId) {
      getOrderDetailsByIdApi(orderId)
        .then((res) => {
          if (res.code === 200) {
            const item = JSON.stringify(res.data);
            uni.navigateTo({
              url: `/pages/liveAction/pages/payOrder?item=${item}&toPay=1`,
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 取消订单
    cancelOrder(id) {
      uni.showModal({
        content: "确认取消该订单？",
        success: (res) => {
          if (res.confirm) {
            cancelOrderApi(id)
              .then((res) => {
                console.log(res);
                if (res.code === 200) {
                  uni.showToast({
                    title: "取消成功",
                    icon: "success",
                  });
                  this.getOrderPageApi();
                } else {
                  uni.showToast({
                    title: "取消失败",
                    icon: "error",
                  });
                }
              })
              .catch((err) => {
                console.log(err);
                uni.showToast({
                  title: "取消失败",
                  icon: "error",
                });
              });
          } else {
            console.log("cancel"); //点击取消之后执行的代码
          }
        },
      });
    },

    getOrderPageApi() {
      orderPageApi(this.status)
        .then((res) => {
          if (res.code === 200) {
            this.scenicNotUseList = res.data;
          } else {
            this.scenicNotUseList = [];
          }
        })
        .catch((err) => {
          console.log(err);
          this.scenicNotUseList = [];
        });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f5f6f7;
}

.pingjia_page {
  width: 750rpx;
  height: 100vh;
  position: relative;
  overflow: hidden;

  .page_top {
    background: #fff;
    height: 96rpx;
  }

  .page_bottom {
    height: 100%;
    width: 100%;
    padding-top: 16rpx;

    .uni_swiper_tab {
      width: 100%;
      height: calc(100vh - 160rpx);
    }

    .item {
      width: 718rpx;
      margin: 0 auto;

      ._card {
        width: 100%;
        padding: 22rpx 32rpx;
        margin-bottom: 16rpx;
        background: #fff;
        border-radius: 10rpx;
      }

      .item_title {
        font-size: 36rpx;
        color: #333333;
        line-height: 50rpx;
        margin-bottom: 24rpx;
        font-weight: bolder;
      }

      .item_center {
        width: 100%;
        display: flex;
        align-items: flex-start;

        image {
          display: inline-block;
          width: 176rpx !important;
          height: 176rpx;
          border-radius: 12rpx;
          margin-right: 22rpx;
        }

        .i_c_right {
          flex: 2.2;

          .name_price {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .name2,
            .price {
              font-size: 32rpx;
              color: #333333;
              line-height: 45rpx;
              font-weight: bolder;
            }

            .price {
              font-size: 24rpx;
            }
          }

          .time_num,
          .time2 {
            margin: 10rpx 0;
            font-size: 24rpx;
            color: #999999;
          }

          .label {
            .label_item {
              padding: 6rpx 16rpx;
              margin-right: 16rpx;
              color: #ff841c;
              font-size: 20rpx;
              height: 32rpx;
              background: rgba(255, 242, 230, 1);
            }
          }
        }
      }

      .item_bottom {
        margin-top: 36rpx;
        text-align: right;

        .price2 {
          font-size: 28rpx;
          font-weight: bolder;
          color: #333333;

          .price2_num {
            font-size: 32rpx;
            color: #ff841c;
          }
        }

        ._pingjia {
          text-align: right;
          margin-top: 32rpx;
          height: 64rpx;
          line-height: 64rpx;

          text {
            display: inline-block;
            width: 176rpx;
            text-align: center;
            background: #ffffff;
            border-radius: 164rpx;
            border: 2rpx solid #999999;
            font-size: 28rpx;
            color: #999999;
          }
        }
      }
    }
  }
}

.u-tabs__wrapper__nav__item {
  width: 30%;
}
</style>
